<template>
	<my-box title="带班人员">
		<div class="flex-col w100 h100 overflow-y-auto">
			<div class="list p-l-10 p-r-10 b-r-2 flex m-between" v-for="(item, index) in list" :key="index">
				<div class="list-item">
					<img src="@/assets/img/rd/arrowRight.png" alt="" />
					<span class="name m-l-10">{{ item[fileType.label] }}</span>
				</div>
				<div class="list-item">
					<span class="name">{{ item[fileType.phone] }}</span>
					<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
				</div>
			</div>
		</div>
	</my-box>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		required: true
	},
	fileType: {
		type: Object,
		default: () => ({ label: 'leaderName', phone: 'leaderPhone' })
	}
})
</script>

<style lang="scss" scoped>
//带班人员
$height: 32px;
.list {
	height: $height;
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
	&-item {
		line-height: $height;
		.name {
			color: rgba(255, 255, 255, 0.6);
		}
		.warn {
			color: rgba(238, 90, 90, 1);
		}
	}

	& + .list {
		margin-top: 10px;
	}
}
</style>
